<template>
    <div>
      <div class="body">
        <!-- 单位信息 -->
        <div class="card-body">
          <!-- 单位信息 -->
          <div class="form-card">
            <div class="title">
              单位信息
            </div>
            <div class="body" >
              <a-form ref="form1" :model="formState" :rules="rules" :label-col="formConfig01.labelCol" :wrapper-col="formConfig01.wrapperCol">
                <a-row>
                  <a-col :span="6">
                    <a-form-item label="单位名称" name="name">
                      <a-input v-model:value="formState.name" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="单位地址" name="address">
                      <a-input v-model:value="formState.address" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="关注等级" name="inspectLevel">
                      <a-select v-model:value="formState.inspectLevel" placeholder="请选择">
                        <a-select-option value="High">重点单位</a-select-option>
                        <a-select-option value="Medium">普通单位</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="辖区派出所" name="psId" v-if="psIds.length>0">
                      <a-select v-model:value="formState.psId" placeholder="请选择">
                        <a-select-option v-for="item in psIds" :key='item.id' :value="item.id">{{item.name}}</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <!-- 第二排 -->
                  <a-col :span="6">
                    <a-form-item label="单位性质" name="natureTypeId">
                      <a-select v-model:value="formState.natureTypeId" placeholder="单位性质">
                        <a-select-option v-for="item in natureTypeIds" :key='item.id' :value="item.id">{{item.name}}</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </div>
          <!-- 联系信息 -->
          <div class="form-card">
            <div class="title">联系信息</div>
            <div class="body" >
              <a-form ref="form2" :model="formState" :rules="rules" :label-col="formConfig01.labelCol" :wrapper-col="formConfig01.wrapperCol">
                <a-row>
                  <a-col :span="6">
                    <a-form-item label="负责人姓名" name="contactName">
                      <a-input v-model:value="formState.contactName" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="负责人电话" name="contactMobile">
                      <a-input v-model:value="formState.contactMobile" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="6">
                    <a-form-item label="网络安全部门" name="netSecDep">
                      <a-input v-model:value="formState.netSecDep" />
                    </a-form-item>
                  </a-col>
                   <a-col :span="6">
                    <a-form-item label="部门负责人姓名" name="netSecName">
                      <a-input v-model:value="formState.netSecName" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="部门负责人电话" name="netSecMobile">
                      <a-input v-model:value="formState.netSecMobile" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="部门负责人邮箱" name="netSecEmail">
                      <a-input v-model:value="formState.netSecEmail" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </div>
            <!-- 资产 -->
          <div class="form-card">
            <div class="title">资产</div>
            <div class="body" >
              <a-form ref="form3" :model="formState" :rules="rules" :label-col="formConfig02.labelCol" :wrapper-col="formConfig02.wrapperCol" >
                <a-row>
                  <a-col :span="12" >
                    <a-form-item label="网站域名" name="urls">
                      <a-textarea style="min-height:156px;max-height:156px;" v-model:value="formState.urls" placeholder="请输入网站主页地址，如:http://www.baidu.com&#10;多个主页地址可用{,}分割&#10;输入主页地址时需包括协议信息，如无协议信息，则默认为http"/>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="IP或IP段" name="ips">
                      <a-textarea style="min-height:156px;max-height:156px" v-model:value="formState.ips" placeholder="支持以下几种格式输入IP或IP段，多个IP或IP段之间以“,”分割&#10;192.168.1.1&#10;192.168.1.1-10"/>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </div>
        </div>
      </div>
      <!-- 提交按鈕 -->
      <div class="form-btns">
        <a-button type="primary" :loading="loading" shape="round" :size="size"  @click="onSubmit(formState,this)">
            确定
        </a-button>
        <router-link  :to="{path:'/Management'}">
          <a-button class="close" shape="round" :size="size" >
              取消
          </a-button>
        </router-link>
      </div>
    </div>
</template>

<script>
import httpRequest from "@/util/httpRequest";
import { useStore } from "vuex";
import validator from "@/util/validator";
import { message } from "ant-design-vue";
export default {
  name: "disktop",
  components: {},
  data() {
    return {
      loading: false,
      formConfig01: {
        labelCol: {
          span: 6
        },
        wrapperCol: {
          span: 24
        }
      },
      formConfig02: {
        labelCol: {
          span: 3
        },
        wrapperCol: {
          span: 24
        }
      },
      // 单位性质集
      natureTypeIds: [],
      //角色集合
      psIds: [],
      formState: {
        name: "",
        address: "",
        inspectLevel: null, // High重点企业,Medium普通企业
        natureTypeId: null, // 企业性质编号, 来自接口 /getFirmNatureTypeOptions.do
        psId: null, // 辖区派出所编号, 来自接口 /getNoRoleOptions.do
        contactName: "", // 联系人姓名
        contactMobile: "", // 联系电话
        netSecDep: "",
        netSecName: "",
        netSecMobile: "",
        netSecEmail: "",
        urls: "", // 多个按逗号分割
        ips: "" // 多个按逗号分割
      },
      rules: {
        name: {
          required: true,
          message: "不能为空",
          trigger: "blur"
        },
        // address: {
        //   required: true,
        //   message: '不能为空',
        //   trigger: 'blur',
        // },
        // inspectLevel: {
        //   required: true,
        //   message: '不能为空',
        //   trigger: 'blur',
        // },
        // natureTypeId: {
        //   required: true,
        //   message: '不能为空',
        //   trigger: 'change',
        //   type:'number'
        // },
        psId: {
          required: true,
          message: "不能为空",
          trigger: "change",
          type: "number"
        },
        // contactName: {
        //   required: true,
        //   message: '不能为空',
        //   trigger: 'blur',
        // },
        contactMobile: [
          {
            //   required: true,
            //   message: '不能为空',
            //   trigger: 'blur',
            // },{
            trigger: "blur",
            validator: validator.mobile
          }
        ],
        // netSecDep: {
        //   required: true,
        //   message: '不能为空',
        //   trigger: 'blur',
        // },
        // netSecName: {
        //   required: true,
        //   message: '不能为空',
        //   trigger: 'blur',
        // },
        netSecMobile: [
          {
            //   required: true,
            //   message: '不能为空',
            //   trigger: 'blur',
            // },{
            trigger: "blur",
            validator: validator.mobile
          }
        ],
        netSecEmail: [
          {
            //   required: true,
            //   message: '不能为空',
            //   trigger: 'blur',
            // },{
            trigger: "blur",
            validator: validator.email
          }
        ]
        // urls: {
        //   required: true,
        //   message: '不能为空',
        //   trigger: 'blur',
        // },
        // ips: {
        //   required: true,
        //   message: '不能为空',
        //   trigger: 'blur',
        // }
      }
    };
  },
  mounted() {
    const store = useStore();
    store.dispatch("setBreadcrumb", {
      text: "单位管理/新建单位",
      isBack: true
    });
    httpRequest.post("企业性质集合(用于选择框)", {}).then(res => {
      this.natureTypeIds = res.data.list;
    });
    httpRequest.post("角色集合", {}).then(res => {
      this.psIds = res.data.list;
    });
  },
  methods: {
    doTheThing: e => {
      httpRequest.post("getFirmDetail", { id: e.id }).then(res => {
        console.log(res);
      });
    },
    onSubmit(formData) {
      Promise.all([
        this.$refs.form1.validate(),
        this.$refs.form2.validate(),
        this.$refs.form3.validate()
      ]).then(() => {
        this.loading = true;
        for (const key in formData) {
          const element = formData[key];
          formData[key] = element == null ? "" : element;
        }
        console.log(formData,':formData')
        httpRequest
          .post("创建企业", formData)
          .then(() => {
            message.success("创建企业成功");
            this.$router.push("/Management");
          })
          .finally(() => {
            this.loading = false;
          });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.body {
  background: #fff;
  .card {
    width: 100%;
  }
}
</style>
